<template>
  <div class="echart-formoney">
      <div id="main"></div>
  </div>
</template>
<script>
import config from './config.js'
export default {
  components: {},
  data() {
    return {

    };
  },
  methods:{
    init(){
        _g.loadJs("//cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js",this.drawEchart)
    },
    /**
     * @name 绘制图表
     */
    drawEchart:async function(){
      var myChart = echarts.init(document.getElementById('main'));
      await this.handleData()
      await myChart.setOption(this.option);
    },

    /**
     * @name 处理绘图数据
     */
    handleData(){
      let moneyInfo = JSON.parse(localStorage.getItem(localSaved.savedMoneyInfo))
      this.option={
        legend:{
          type:"scroll",
          bottom:"0",
          data:[]
        },
        grid:{
          top:"30",
          left:"40",
          right:"0",
        },
        xAxis:[{type:"category",data:[]}],
        yAxis:[{type:"value",name:"元"}],
        series:[]
      }
      config.modelData.forEach((ele,index)=>{
        if(index>0){
          this.option.legend.data.push(ele.label)
          let obj={
            name:ele.label,
            type:"bar",
            data:[]
          }
          moneyInfo.forEach(ele1=>{
            obj.data.push(ele1[ele.prop])
          })
          this.option.series.push(obj)
        }
      })
      this.handleAll(moneyInfo)

      moneyInfo.forEach((ele,index) => {
        this.option.xAxis[0].data.push(ele[config.modelData[0].prop]||'暂无')
      });
    },

    /**
     * @name 计算总比
     */
    handleAll(moneyInfo,title="总估值"){
      this.option.legend.data.push(title)
      let obj={name:title,type:"line",data:[]}
      moneyInfo.forEach(ele=>{
        let num = 1500
        obj.data.push(num)
      })
      this.option.series.push(obj)
    }
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  },
};
</script>
<style lang='scss' scope>
.echart-formoney {
    box-sizing: border-box;
    padding: 10px;

    div{
      width: 100%;
      height: 350px;
    }
}
</style>